    <!--
    绘制矩形
     strokeRect
     fillRect
     clearRect
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <canvas id="canvas" width="300" height="300"></canvas>
        <script>
            var canvas=document.getElementById("canvas");
            var cxt=canvas.getContext('2d');
            cxt.fillRect(100,100,100,100);
            cxt.strokeStyle='red';
            cxt.lineJoin='round';
            cxt.lineWidth=20;
            cxt.strokeRect(150,150,200,100);
            cxt.clearRect(40,50,200,100);
        </script>
    </body>
    </html>